<template>
	<view class="h-welcome">
		<view class="h-title">
			<view class="h-icon iconfont icon-key" />
			<text class="h-name">SKey</text>
		</view>
		<view class="h-body">
			<view class="h-body-item h-slogan">专属密码保险箱，让生活变得更简单</view>
			<view class="h-body-item h-start">
				<button class="h-wxlogin" open-type="getUserInfo" type="primary" @getuserinfo="userInfoBind">
					<text class="iconfont icon-weixin" style="font-size: 18px" />
					授权登录
				</button>
				<view style="height: 130rpx; padding-top: 30rpx">
					<view class="h-wxlogin-tips">将同步您的云数据到本地</view>
					<button class="h-localuse" @click="startUseBind">本地使用</button>
				</view>
			</view>
		</view>
		<view style="height: 150rpx" />
		<view class="h-foot">
			<view @click="guideBind">使用指南</view>
			<view @click="qaBind">常见问题</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "welcome",
		data() {
			return {

			};
		},
		methods: {
			startUseBind: function() {

			},
			guideBind: function() {
				uni.navigateTo({ url: '/pages/center/childpages/guide/guide' });
			},
			qaBind: function() {
				uni.navigateTo({ url: '/pages/center/childpages/problem/problem' });
			}
		}
	}
</script>

<style>
	.h-welcome {
		height: calc(100vh - 100px);
		padding: 80px 70rpx 20px 70rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.h-title .h-icon {
		height: 120rpx;
		line-height: 120rpx;
		width: 120rpx;
		border-radius: 50%;
		background-color: #4cb050;
		text-align: center;
		color: #fff;
		font-size: 70rpx;
		display: inline-block;
	}

	.h-title .h-name {
		margin-left: 35rpx;
		font-size: 50rpx;
		font-weight: 800;
	}

	.h-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.h-body-item {
		padding: 40rpx 0rpx;
	}

	.h-slogan {
		font-size: 50rpx;
		font-weight: 800;
	}

	.h-start button {
		border-radius: 50rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border: none;
	}

	.h-start button::after {
		border: none;
	}

	.h-start .h-wxlogin {
		color: #fff;
	}

	.h-start .h-wxlogin-tips {
		font-size: 28rpx;
		color: #c0c0c0;
		text-align: center;
	}

	.h-start .h-localuse {
		color: #000;
	}

	.h-foot {
		font-size: 26rpx;
		display: flex;
		justify-content: center;
	}

	.h-foot view {
		padding: 20rpx;
		text-align: center;
	}
</style>